import React, {useState, useEffect} from 'react';
import {DatePicker, Input, Space, Tabs} from "antd";
import {AppleOutlined, AndroidOutlined, SearchOutlined} from '@ant-design/icons';
import {getDateTime2} from "@/utils/getDate";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";

const {TabPane} = Tabs
const {RangePicker} = DatePicker
const {Search} = Input;

const TheOrder = ({extra, onFinish}) => {
    const [startTime, setStartTime] = useState('')
    const [endTime, setEndTime] = useState('')
    const [searchValue, setSearchValue] = useState('')
    const [tabKey, setTabKey] = useState('1')
    const [allPageParams, setAllPageParams] = useState({
        pageNo: 1,
        pageSize: 10,
        total: 1
    })
    useEffect(() => {
        onFinish({tabKey, startTime, endTime, searchValue})
    }, [startTime, endTime, searchValue, tabKey])
    const operations = {
        right: <Space>
            <Search onSearch={e => setSearchValue(e)} style={{width: 200}} placeholder={'请输入订单号'} enterButton/>
            <div>
                <span>下单时间 </span>
                <RangePicker onChange={e => datePickerChange(e)}/>
            </div>
        </Space>
    }
    const datePickerChange = e => {
        if (e) {
            const start = getDateTime2(e[0]._d, 'date')
            const end = getDateTime2(e[1]._d, 'date')
            setStartTime(start)
            setEndTime(end)
        } else {
            setStartTime('')
            setEndTime('')
        }
    }
    const pageChange = (pageNo, pageSize, key, params) => {
        console.log(pageNo)
        console.log(pageSize)
        console.log([params].pageNo)
    }
    return <Tabs onChange={value => setTabKey(value)} tabBarExtraContent={extra ? operations : false}>
        {
            tabArr.map((v, i) => {
                return <TabPane tab={
                    <span>
                        {v.icon}
                        {v.title}
                    </span>
                } key={v.key}>
                    <TheTable columns={columns}/>
                    <ThePagination pageNo={v.pageParams.pageNo} pageSize={v.pageParams.pageNo} total={100}
                                   pageChange={(pageNo, pageSize) => pageChange(pageNo, pageSize, v.key, `${v.key}PageParams`)}/>
                </TabPane>
            })
        }
    </Tabs>
}

const tabArr = [
    {
        icon: <AppleOutlined/>,
        title: '所有订单',
        key: 'all',
        pageParams: 'allPageParams',
    },
    {
        icon: <AppleOutlined/>,
        title: '待付款',
        key: 'pay',
    },
    {
        icon: <AppleOutlined/>,
        title: '待发货',
        key: 'delivery',
    },
    {
        icon: <AppleOutlined/>,
        title: '待收货',
        key: 'goods',
    },
    {
        icon: <AppleOutlined/>,
        title: '交易成功',
        key: 'success',
    },
    {
        icon: <AppleOutlined/>,
        title: '交易关闭',
        key: 'close',
    }
]

const columns = [
    {
        title: '订单编号',
        dataIndex: '',
        key: ''
    },
    {
        title: '收货人',
        dataIndex: '',
        key: ''
    },
    {
        title: '联系方式',
        dataIndex: '',
        key: ''
    },
    {
        title: '收货地址',
        dataIndex: '',
        key: ''
    },
    {
        title: '订单金额（元）',
        dataIndex: '',
        key: ''
    },
    {
        title: '嗨豆抵扣（元）',
        dataIndex: '',
        key: ''
    },
    {
        title: '服务费（元）',
        dataIndex: '',
        key: ''
    },
    {
        title: '实付金额（元）',
        dataIndex: '',
        key: ''
    },
    {
        title: '订单时间',
        dataIndex: '',
        key: ''
    },
    {
        title: '订单状态',
        dataIndex: '',
        key: ''
    },
    {
        title: '操作',
        render: (text, record) => {
            return <>
                <TheButton>查看订单</TheButton>
                <TheButton>发货</TheButton>
                <TheButton>查看物流</TheButton>
            </>
        },
        fixed: 'right'
    },
]

export default TheOrder